class heJSON1{
    constructor(ops){
        this.heJSON = ops.heJSON;
        this.box1=ops.box1;
        this.url = ops.url;
        this.heHot=ops.heHot;
        this.css1=ops.css1;
        this.heNeed=ops.heNeed;
        this.addEvent();
        console.log(this.heNeed);
    }
    addEvent(){
        const that=this;
        that.load1();
        that.css1.href = "./css/heHot_.css";
        this.heHot.addEventListener("mouseenter",function(){
            that.load1();
            that.css1.href = "./css/heHot_.css";
        })
        this.heNeed[0].addEventListener("mouseenter",function(){
            that.load2();
            that.css1.href = "./css/heNeed_.css";
        })
        this.heNeed[1].addEventListener("mouseenter",function(){
            that.load3();
            that.css1.href = "./css/heNeed_.css";
        })
        this.heNeed[2].addEventListener("mouseenter",function(){
            that.load4();
            that.css1.href = "./css/heNeed_.css";
        })
    }
    load1(){
        request({
            url:this.url,
            success:(res)=>{
                this.res=(JSON.parse(res).helpHot.img);
                this.render();
            }
        });
    }
    load2(){
        request({
            url:this.url,
            success:(res)=>{
                this.res=(JSON.parse(res).helpNeed.img);
                this.render();
            }
        });
    }
    load3(){
        request({
            url:this.url,
            success:(res)=>{
                this.res=(JSON.parse(res).helpGift.img);
                this.render();
            }
        });
    }
    load4(){
        request({
            url:this.url,
            success:(res)=>{
                this.res=(JSON.parse(res).helpDinner.img);
                this.render();
            }
        });
    }
    render(){
        let str = "";
            for(var i=0;i<this.res.length;i++){
                str += `
                <div class="box1" index="${this.res[i]}">
                <img src="${this.res[i].url}" alt="">
                <span>${this.res[i].price}</span>
                <p>${this.res[i].name}</p>
                </div>
                `    
            }
        this.heJSON.innerHTML = str;
    }
}

new heJSON1({
    css1:document.getElementById("css1"),
    heHot:document.querySelector(".heHot"),
    heNeed:document.querySelectorAll(".heNeed"),
    box1:document.querySelectorAll(".heJSON>.box1"),
    heJSON:document.querySelector(".heJSON"),
    url:"http://localhost:3001/json/list.json"
});
